<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Password reset</title>
    <style type="text/css">
      * { margin:0; padding: 0; }
      html, body { background: #333; font-size: 22px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; }
      h2 { margin-bottom: 0.5em; }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      form {
        text-align: center;
        background: #fff;
        margin: 0 auto;
        padding: 2em;
        border-radius: 0.2em;
        box-shadow: 0 0 0.5em rgba(0,0,0,0.1);
      }
      input {
        font-size: 0.8em;
        border-radius: 0.2em;
        padding: 0.5em;
      }
      input[type=submit] { background: #333; color: #fff; border: none; cursor: pointer;}
      p.error { color: red; margin-top: 1.2em; }
      p.success { color: green; margin-top: 1.2em; }
    </style>
  </head>
  <body>
    <form id="reset-password" action="[ACTION]" method="post">
      <h2>🗝️ Reset Password</h2>
      <input type="hidden" name="token" value="[TOKEN]" />
      <input type="password" name="password" />
      <input type="submit" value="Reset password" />
    </form>

    <!-- Display error from query param -->
    <script type="text/javascript">
      const urlParams = new URLSearchParams(new URL(location.href).search);
      const errorMessage = urlParams.get("error");
      const successMessage = urlParams.get("success");

      if (errorMessage) {
        var errorEl = document.createElement("p");
        errorEl.className = "error";
        errorEl.innerText = errorMessage;
        document.querySelector("form#reset-password").appendChild(errorEl);
      }

      if (successMessage) {
        var errorEl = document.createElement("p");
        errorEl.className = "success";
        errorEl.innerText = successMessage;
        document.querySelector("form#reset-password").appendChild(errorEl);
      }
    </script>
  </body>
</html>